<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>详情页</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2795554_ia1si461gp9.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="icon" href="../images/logo-mi2.png">
</head>

<body>
    <!-- 头部导航 -->
    <div id="header">
        <div class="header-con">
            <img src="../images/logo-mi2.png" alt="">
            <ul>
                <li><a href="/">概述页</a></li><span></span>
                <li><a href="/"> 参数页</a></li><span></span>
                <li><a href="/">F码通道</a></li><span></span>
                <li><a href="/">资讯客服</a></li><span></span>
                <li><a href="/">用户评价</a></li>
            </ul>
        </div>
    </div>
    <!-- 商品详情 -->
    <main id="content">
        <div class="content-con">
            <div class="check" id="xm">
                <div class="shade"></div>
            </div>
            <div class="int">
                <h4 style="font-size:30px;"></h4>
                <table>
                    <tr>
                        <td>商品介绍&nbsp;&nbsp;&nbsp;<i></i></td>
                    </tr>
                    <tr>
                        <td>商品价格&nbsp;&nbsp;&nbsp;<span class='price'></span></td>
                    </tr>
                    <tr class='local'>
                        <td>配送地址&nbsp;&nbsp;&nbsp; <span>省</span>
                            <select name="" id="province">
                                <option value="">请选择省份</option>
                            </select>
                            <span>市</span>
                            <select name="" id="city">
                                <option value="">请选择市区</option>
                            </select>
                            <span>县</span>
                            <select name="" id="area">
                                <option value="">请选择县城</option>
                            </select>
                            <span>镇</span>
                            <select name="" id="town">
                                <option value="">请选择乡镇</option>
                            </select></td>
                    </tr>
                    <tr>
                        <td>选择版本&nbsp;&nbsp;&nbsp;<input type="text" value = "5G全网通 12GB+256GB"  readonly><input type="text" value = "5G全网通 12GB+512GB"  readonly><input type="text" value = "5G全网通 8GB+256GB"  readonly></td>
                    </tr>
                    <tr>
                        <td>选择套餐&nbsp;&nbsp;&nbsp;<input type="text" value = "官方标配" style="width:80px"  readonly></td>
                    </tr>
                    <tr>
                    <td>保障服务&nbsp;&nbsp;&nbsp;<input type="text" value = "小米无忧服务 ￥1999"  readonly><input type="text" value = "碎屏服务宝1年 ￥719"  readonly><input type="text" value = "小米延长服务宝(一年期) ￥454"  readonly style="width:200px;"></td>
                    </tr>
                </table>
                <div style="position: relative;margin-top:10px;">
                        <input type="text" style="width:50px;height:50px;text-align: center;border-right:none;
                        border:1px solid #ccc" class="num" value='1'><button style="position: absolute;top:0;width:25px;height:25px;line-height: 25px;border-left:none;border-bottom:none;
                        border:1px solid #ccc" class="add">+</button><button style="position: absolute;top:25px;width:25px;height:25px;line-height: 25px;border-left:none;border-top:none;
                        border:1px solid #ccc" class="reduce">-</button>
                        <button type="button" class="btn btn-primary addCart" style="height:50px;margin-left: 40px;width:200px;font-size: 20px;background-color:#FC600C;outline: none;border:none;"
                        >加入购物车</button>
                        <button type="button" class="btn btn-primary inCart" style="height:50px;margin-left: 10px;width:200px;font-size: 20px;background-color:#CA151D;outline: none;border:none">进入购物车</button>
                    </div>
                 
            </div>
            <div class="bigBox">
                <img src="" alt="" class="bigImg">
            </div>
        </div>
    </main>
    <!-- 推荐商品栏 -->
    <h3 style="font-size: 32px">猜你喜欢</h3>
    <div id="reGoods">
        <div class="reGoods-con" id="list">
        </div>
    </div>
    <!-- 分页栏 -->
    <div class="page container text-center " id="page" style="margin-top:-300px;"></div>
    <!-- 底部栏 -->
     <div id="footer">
            <div class="footer-con">
                <ul class="ulTop">
                    <li>
                        <i class="iconfont icon-weixiufuwu"></i>预约维修服务
                        <span>|</span>
                    </li>
                    <li>
                        <i class="iconfont icon-tian1"></i>七天无理由退货
                        <span>|</span>
                    </li>
                    <li>
                        <i class="iconfont icon-tian"></i>十五天免费换货
                        <span>|</span>
                    </li>
                    <li>
                        <i class="iconfont icon-baoyou"></i>满69包邮
                        <span>|</span>
                    </li>
                    <li>
                        <i class="iconfont icon-wangdian"></i>520余家售后网点</li>
                </ul>
    
                <table style="float: left">
                    <tr>
                        <td style="padding-left:0">帮助中心</td>
                        <td>服务支持</td>
                        <td>线下门店</td>
                        <td>关于小米</td>
                        <td>关注我们</td>
                        <td>特色服务</td>
                    </tr>
                    <tr>
                        <td>账户管理</td>
                        <td>售后政策</td>
                        <td>小米之家</td>
                        <td>了解小米</td>
                        <td>新浪微博</td>
                        <td>F码通道</td>
                    </tr>
                    <tr>
                        <td>购物指南</td>
                        <td>自动服务</td>
                        <td>服务网点</td>
                        <td>加入小米</td>
                        <td>官方微信</td>
                        <td>礼物码</td>
                    </tr>
                    <tr>
                        <td>订单操作</td>
                        <td>相关下载</td>
                        <td>授权体验店/专区</td>
                        <td>投资者关系</td>
                        <td>联系我们</td>
                        <td>防伪查询</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>企业社会责任</td>
                        <td>工艺基金会</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>廉洁举报</td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
                <div class="call">
                    <p>400-100-5678</p>
                    <p>8:00-18:00(仅收市话费)</p>
                    <p>
                        <i class="iconfont icon-xinxi"></i>
                        <span>人工客服</span>
                    </p>
                    <p>
                        <span>关注小米:</span>
                        <i class="iconfont icon-weibo"></i>
                        <i class="iconfont icon-weixin"></i>
                    </p>
                </div>
            </div>
    </div>
    <!-- 版权栏 -->
    <div id="copyright">
            <div class="copy-con">
                <ul>
                    <li>小米商城</li>
                    <li>MIUI</li>
                    <li>米家</li>
                    <li>米聊</li>
                    <li>多看</li>
                    <li>游戏</li>
                    <li>政企服务</li>
                    <li>小米天猫店</li>
                    <li>小米集团隐私政策</li>
                    <li>小米公司儿童信息保护规则</li>
                    <li>小米商城隐私政策</li>
                    <li小米商城用户协议></li>
                        <li>问题反馈</li>
                        <li style="background:none">Select&nbsp;Location</li>
                        <br>
                </ul>
                <ol>
                    <li>北京互联网法院法律服务工作站</li>
                    <li>中国消费者协会</li>
                    <li style="background: none">北京市消费者协会</li>
                    <br>
                </ol>
                <p>&copy;mi.com 京ICP证110507号 京ICP备10046444号 京公安安备11010802020134号 京网文[2020]0276-042号</p>
                <p>（京）网城平台备字（2018）第00005号 互联网药品信息服务资格证(京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
                <p>增值电信业务许可证 网络食品经营备案 京食药网食备22010048 食品经营许可证</p>
                <p>违法和不良信息举报电话:171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                <h4></h4>
                <h3>让全球每个人都能享受科技带来的美好生活</h3>
            </div>
    </div>
</body>
<html>
<script src="../js/jquery-3.6.0.js"></script>
<script src="../js/image.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../lib/layui/layui.js"></script>
<script src="../lib/layer/layer.js"></script>
<script src="../js/cookie.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/detail.js"></script>
<script src="../js/four_link.js"></script>
<script>
    var params = (function () {
        var search = location.search;//获取location的search属性，保存在search中
        var params = {}; //创建空对象params
        if (search != "") {        //如果search不是空字符串
            search.slice(1).split("&").forEach(    //?username=zhangdong&pwd=123456;//search去开头?，按&切割为数组，forEach
                function (val) {
                    var arr = val.split("=");        //将当前元素值按=切割，保存在arr中
                    params[arr[0]] = arr[1];        //向params中添加一个元素,属性名为arr[0],值为arr[1]
                }
            );
        }
        return params; //返回param
    })();
    //console.dir(params.id);
    //数据渲染
    for (let i = 0; i < JSON.parse(localStorage.getItem('pros')).length; i++) {
        if (params.id == JSON.parse(localStorage.getItem('pros'))[i].id) {

            $('.check').css('background-image',`url(${JSON.parse(localStorage.getItem('pros'))[i]['urlImg']})`);
            $('.int h4').text(JSON.parse(localStorage.getItem('pros'))[i]['goods']);
            $('.int i').text(JSON.parse(localStorage.getItem('pros'))[i]['introduce']);
            $('.int .price').text(JSON.parse(localStorage.getItem('pros'))[i]['price']);
            $('.bigImg').prop('src', JSON.parse(localStorage.getItem('pros'))[i]['urlImg'])
        }
    }
    //写放大镜，获取dom元素
    var checkbox = document.querySelector('.check')
    var shade = document.querySelector('.shade')
    var bigBox = document.querySelector('.bigBox')
    var bigImg = document.querySelector('.bigImg')
    checkbox.onmouseenter = function(){
        shade.style.display = 'block'
        bigBox.style.display = 'block'
    }
    checkbox.onmouseleave = function(){
        shade.style.display = 'none'
        bigBox.style.display = 'none'
    }
    /* 
        第二步
            - 获取遮罩层的移动位置
     */
     checkbox.onmousemove = function(e){
        var e = e || window.event
        // 获取鼠标的位置
        var x = e.clientX-checkbox.offsetLeft-65// 只是为了好看
        var y = e.clientY-checkbox.offsetTop-65
        if(x>=270){
            x=270
        }
        if(x<0){
            x= 0
        }
        if(y>=270){
            y=270
        }
        if(y<=0){
            y=0
        }
        shade.style.left = x + 'px'
        shade.style.top = y + 'px'

        // 大盒子的移动距离
        bigImg.style.left = -3*x + 'px'
        bigImg.style.top = -3*y + 'px'
     }
</script>
<script>
layui.use(['laypage', 'layer'], function () {
    var laypage = layui.laypage,
        layer = layui.layer;

    // 发起ajax请求
    async function getList() {
        let res = await pAjax({
            url: '../php/reGoods.php',
            dataType:'json'
        })
        //console.log(res);
        let {
            data
        } = res; // 解构赋值

        //调用分页
        laypage.render({
            elem: 'page',
            count: data.length,
            first:'首页',
            last:'尾页',
            limit: 4,
            limits: [4, 8, 16],
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
            jump: function (obj) {
                // console.log(obj);
                //模拟渲染
                document.getElementById('list').innerHTML = function () {
                    var arr = [],
                        thisData = data.concat().splice(obj.curr * obj.limit - obj
                            .limit, obj.limit);

                    layui.each(thisData, function (index, item) {
                        // arr.push('<li>' + item + '</li>');
                        arr.push(`<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="${item.imgpath.split('==========')[0]}" alt="..." style="width:100%;height:100%;">
                    <div class="caption">
                        <h3 style='font-size:20px'>${item.name}&nbsp;&nbsp;&nbsp;<span style="color:#CA151D">￥${item.price}</span></h3>
                        <p class='introduce'>${item.introduce}</p>
                        <p>
                            <a href="#" class="btn btn-default" role="button">查看详情</a>
                        </p>
                    </div>
                </div>
            </div>`)

                    });
                    // console.log(arr.join(''));
                    return arr.join('');
                }();
            }
        });

    }
    getList()
});
</script>
